<template>
  <div class="home-container">
    <!-- 头部搜索 -->
    <div class="header">
      <img src="@/assets/images/logo.png" alt />
      <van-search placeholder="搜索商品名称" @focus="$router.push('/search')"></van-search>
    </div>

    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in lunboData" :key="item.img">
        <img :src="item.img" />
      </van-swipe-item>
    </van-swipe>

    <!-- 9宫格 -->
    <van-grid :column-num="4" :border="false">
      <van-grid-item>
        <img src="@/assets/images/menu10.png" alt />
        <div class="text">数码电器</div>
      </van-grid-item>
      <van-grid-item to="/newslist">
        <img src="@/assets/images/menu19.png" alt />
        <div class="text">乐淘资讯</div>
      </van-grid-item>
      <van-grid-item to="/category">
        <img src="@/assets/images/menu17.png" alt />
        <div class="text">分类商品</div>
      </van-grid-item>
      <van-grid-item>
        <img src="@/assets/images/more.png" alt />
        <div class="text">查看更多</div>
      </van-grid-item>
    </van-grid>

    <van-divider>为你推荐</van-divider>

    <!-- 推荐商品列表 -->
    <div class="goodslist">
      <div class="item" @click="$router.push('/goodsDetail/' + item.id)" v-for="item in recommendGoods" :key="item.id">
        <img v-lazy="item.img_url" />
        <div class="text">
          <div class="title overflow_ellipsis">
            {{ item.title }}
          </div>
          <div class="footer">
            <span class="price">&yen;&nbsp;{{ item.sell_price }} </span>
            <span class="buy">{{ item.buy }}人购买</span>
          </div>
        </div>
      </div>
    </div>
    <van-divider v-if="isLoadDone">已经到底了</van-divider>

    <!-- 回到顶部 -->
    <BackTop bottom="80" />
  </div>
</template>

<script>
import BackTop from '@/components/BackTop'
import { reqGetLunbo, reqRecommendGoods } from '@/api'
import _ from 'lodash'
export default {
  name: 'Home',
  data() {
    return {
      lunboData: [],
      recommendGoods: [],
      page: 1,
      pagesize: 8,
      isLoadDone: false,
    }
  },
  methods: {
    scrollHandler() {
      if (this.isLoadDone) {
        // 已经加载完毕了，不在往下走了
        return
      }
      // 网页卷上去的高度
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      // 网页可视视口的高度
      let windowHeight = document.documentElement.clientHeight || document.body.clientHeight
      // 整个网页的高度（包含溢出元素的高度）
      let pageHeight = document.documentElement.scrollHeight || document.body.scrollHeight

      // 还没有触底，提前200px加载
      if (Math.ceil(scrollTop) + windowHeight + 200 >= pageHeight) {
        this.page++
        this.getRecommend()
      }
    },
    // 加载推荐商品
    async getRecommend() {
      // 获取推荐商品
      let { message: recommendGoods } = await reqRecommendGoods(this.page, this.pagesize)
      if (recommendGoods.length === 0) {
        // 说明数据加载完毕了
        this.isLoadDone = true
        return
      }
      // 合并数组数据
      this.recommendGoods = [...this.recommendGoods, ...recommendGoods]
    },
  },
  created() {
    // 对滚动函数进行节流优化
    this.throttleScrollHandler = _.throttle(this.scrollHandler, 800)
  },
  async mounted() {
    // 获取轮播图
    const { message } = await reqGetLunbo()
    this.lunboData = message
    this.getRecommend()
    document.addEventListener('scroll', this.throttleScrollHandler)
  },
  beforeDestroy() {
    document.removeEventListener('scroll', this.throttleScrollHandler)
  },
  components: {
    BackTop,
  },
}
</script>

<style lang="scss" scoped>
.home-container {
  background: #f0eded;

  // 头部搜索框
  .header {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 4px;
    background-color: #fff;

    img {
      height: 40px;
    }

    .van-search {
      // 占满弹性盒子的剩余空间
      flex: 1;
    }
  }

  // 轮播图
  .my-swipe {
    height: 240px;

    .van-swipe-item {
      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  // 9宫格
  .van-grid {
    background: #fff;

    .van-grid-item {
      img {
        width: 50%;
      }

      .text {
        font-size: 14px;
        color: #524949;
      }
    }
  }

  .van-divider {
    border-color: #91959b;
  }

  // 商品列表
  .goodslist {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 2px;

    .item {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 46%;
      margin: 4px;
      overflow: hidden;
      background: #fff;
      border-radius: 6px;

      img {
        width: 100%;
      }

      .text {
        display: flex;
        flex-direction: column;
        padding: 2px;

        .title {
          font-size: 12px;
          color: #333;
        }

        .footer {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 4px;

          .price {
            padding: 10px 0;
            font-size: 14px;
            color: #f50;
          }

          .buy {
            font-size: 12px;
            color: #999;
          }
        }
      }
    }
  }
}
</style>
